<template>
  <div>
    <el-card shadow="hover" style="margin-bottom: 20px">
      <div class="header_card">
        <div>
          <el-avatar :size="100" :src="url"></el-avatar>
        </div>

        <div class="pet_box">
          <ViteSvgIcon name="dog" style="width: 50px; height: 50px; margin-left: 20px" />
          <ViteSvgIcon name="cat" style="width: 50px; height: 50px; margin-left: 20px" />
          <ViteSvgIcon name="mouse" style="width: 50px; height: 50px; margin-left: 20px" />
          <ViteSvgIcon name="duck" style="width: 50px; height: 50px; margin-left: 20px" />
          <ViteSvgIcon name="pig" style="width: 50px; height: 50px; margin-left: 20px" />
          <ViteSvgIcon name="morePet" style="width: 50px; height: 50px; margin-left: 20px" />
        </div>
      </div>
    </el-card>
    <el-card style="display: flex; justify-content: center">
      <ViteSvgIcon name="welcome" style="width: 600px; height: 300px" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user'
import { reactive, toRefs, ref, onMounted } from 'vue'
const userStore = useUserStore()
const url = userStore.avatar
</script>
<style scoped lang="scss">
.header_card {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
